export default {
  name: "Icon",
  props: {
    type: {
      type: String,
      default: ''
    },
    chartId: {
      type: [String, Number],
      default: 1
    }
  },
  data () {
    return {

    }
  },
  methods: {
    renderIcon (componentType, chartId) {
      console.log(componentType, chartId)
      // 业务组件
      if (componentType === 'analysis') {
        return this.renderAnalysisIcon(chartId)
      // eslint-disable-next-line brace-style
      }
      // 非业务组件
      else {
        return this.renderUnAnalysisIcon(chartId)
      }
    },
    renderAnalysisIcon (chartId) {
      let icon
      switch (chartId) {
        // 交叉表
        case 1: {
          icon = <c-icon type="crosstab" />
          break
        }
        // 分组表
        case 2: {
          icon = <c-icon type="crosstab" />
          break
        }
        // 明细表
        case 3: {
          icon = <c-icon type="detail-account" />
          break
        }
        // 柱状图
        case 4: {
          icon = <c-icon type="bar" />
          break
        }
        // 堆叠柱状图
        case 5: {
          icon = <c-icon type="stack-bar" />
          break
        }
        // 条形图
        case 6: {
          icon = <c-icon type="horizontal-bar" />
          break
        }
        // 对比柱状图
        case 7: {
          icon = <c-icon type="bar" />
          break
        }
        // 饼图
        case 8: {
          icon = <c-icon type="pie" />
          break
        }
        // 环形图
        case 9: {
          icon = <c-icon type="doughnut" />
          break
        }
        // 玫瑰图
        case 10: {
          icon = <c-icon type="rose" />
          break
        }
        // 多层饼图
        case 11: {
          icon = <c-icon type="pie" />
          break
        }
        // 折线图
        case 12: {
          icon = <c-icon type="line" />
          break
        }
        // 面积图
        case 13: {
          icon = <c-icon type="area-line" />
          break
        }
        // 堆叠折线图
        case 14: {
          icon = <c-icon type="line" />
          break
        }
        // 堆叠面积图
        case 15: {
          icon = <c-icon type="line" />
          break
        }
        // 基础地图
        case 16: {
          icon = <c-icon type="map" />
          break
        }
      }
      return icon
    },
    renderUnAnalysisIcon (chartId) {
      const style = {
        marginRight: '4px',
        marginTop: '1px'
      }
      return <c-icon type={chartId} style={style} />
    }
  },
  render () {
    const {
      type,
      chartId
    } = this
    return this.renderIcon(type, chartId)
  }
}
